<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- @authority侯仁杰 
	医生主页管理系统-->	
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title></title>
        <link rel="shortcut icon" href="img/favicon.ico">
        <!--STYLESHEET-->
        <!--=================================================-->
        <!--Roboto Slab Font [ OPTIONAL ] -->
        <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,500italic,400" rel="stylesheet">
        <!--Bootstrap Stylesheet [ REQUIRED ]-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--Jasmine Stylesheet [ REQUIRED ]-->
        <link href="css/style.css" rel="stylesheet">
        <!--Font Awesome [ OPTIONAL ]-->
        <link href="plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <!--Switchery [ OPTIONAL ]-->
        <link href="plugins/switchery/switchery.min.css" rel="stylesheet">
        <!--Bootstrap Select [ OPTIONAL ]-->
        <link href="plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
        <!--Demo [ DEMONSTRATION ]-->
        <link href="css/demo/jasmine.css" rel="stylesheet">
        <!--SCRIPT-->
        <!--=================================================-->
        <link rel="stylesheet" href="../chat/layim/css/layui.css">
        <!--=================================================-->
        <!--Page Load Progress Bar [ OPTIONAL ]-->
        <link href="plugins/pace/pace.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" href="css/matrix-style.css" />
        <script src="plugins/pace/pace.min.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
    </head>
    <!--TIPS-->
    <!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
    <body>
        <div id="container" class="effect mainnav-sm navbar-fixed mainnav-fixed">
            <!--NAVBAR-->
            <!--===================================================-->
            <header id="navbar" >
                <div id="navbar-container" class="boxed">
                    <!--Navbar Dropdown-->
                    <!--================================-->
                    <div class="navbar-content clearfix">
                        <ul class="nav navbar-top-links pull-left">
                            <!--Navigation toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="tgl-menu-btn">
                                <a class="mainnav-toggle" href="#"> <i class="fa fa-navicon fa-lg"></i> </a>
                            </li>
                            
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End message dropdown-->
                            <!--Notification dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell fa-lg"></i> <span class="badge badge-header badge-danger">5</span> </a>
                                <!--Notification dropdown menu-->
                                <div class="dropdown-menu dropdown-menu-md with-arrow">
                                    <div class="pad-all bord-btm">
                                        <div class="h4 text-muted text-thin mar-no"> Notification </div>
                                    </div>
                                    <div class="nano scrollable">
                                        <div class="nano-content">
                                            <ul class="head-list">
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-primary"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New comments waiting approval</div>
                                                            <small class="text-muted">15 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="#" class="media">
                                                        <span class="badge badge-success pull-right">90%</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-danger"> <i class="fa fa-hdd-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">HDD is full</div>
                                                            <small class="text-muted">50 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-info"> <i class="fa fa-file-word-o fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Write a news article</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="#" class="media">
                                                        <span class="label label-danger pull-right">New</span>
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-purple"> <i class="fa fa-comment fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">Comment Sorting</div>
                                                            <small class="text-muted">Last Update 8 hours ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                                <!-- Dropdown list-->
                                                <li>
                                                    <a href="#" class="media">
                                                        <div class="media-left"> <span class="icon-wrap icon-circle bg-success"> <i class="fa fa-user fa-lg"></i> </span> </div>
                                                        <div class="media-body">
                                                            <div class="text-nowrap">New User Registered</div>
                                                            <small class="text-muted">4 minutes ago</small> 
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--Dropdown footer-->
                                    <div class="pad-all bord-top">
                                        <a href="#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications </a>
                                    </div>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End notifications dropdown-->
                        </ul>
                        <ul class="nav navbar-top-links pull-right">
                            <!--Profile toogle button-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li class="hidden-xs" id="toggleFullscreen">
                                <a class="fa fa-expand" data-toggle="fullscreen" href="#" role="button">
                                <span class="sr-only">Toggle fullscreen</span>
                                </a>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End Profile toogle button-->
                            <!--User dropdown-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <li id="dropdown-user" class="dropdown">
                                <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                    <span class="pull-right"> <img class="img-circle img-user media-object" src="img/av1.png" alt="Profile Picture"> </span>
                                    <div class="username hidden-xs" id="realName"></div>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right with-arrow">
                                    <!-- User dropdown menu -->
                                    <ul class="head-list">
                                        <li>
                                            <a href="doctor-login.jsp" > <i class="fa fa-sign-out fa-fw"></i> 注销 </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--End user dropdown-->
                        </ul>
                    </div>
                    <!--================================-->
                    <!--End Navbar Dropdown-->
                </div>
            </header>
            <!--===================================================-->
            <!--END NAVBAR-->
            <div class="boxed">
                <!--CONTENT CONTAINER-->
                <!--===================================================-->
                <div id="content-container">
                    <div class="pageheader hidden-xs">
                        <h3><i class="fa fa-home"></i> 主 页 </h3>
                    </div>
                    <!--Page content-->
                    <!--===================================================-->
                    <div id="page-content">
                      <div class="row">
                        <div class="col-md-12">                    
                          <div class="panel">
                            <div class="panel-heading">
                                <div class="panel-control">
                                    <button class="btn btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></button>
                                    <button class="btn btn-default" data-click="panel-reload"><i class="fa fa-refresh"></i></button>
                                    <button class="btn btn-default" data-click="panel-collapse"><i class="fa fa-chevron-down"></i></button>
                                    <button class="btn btn-default" data-dismiss="panel"><i class="fa fa-times"></i></button>
                                </div>
                                <h3 class="panel-title">历史文章</h3>
                            </div>
                            <div class="panel-body">
                                <!-- Inline Form  -->
                                <!--===================================================-->
                                <form class="form-inline">
                                    <div class="form-group mar-hor">
                                    	发布标题
                                        <input type="text" style="margin:10px" id="SearchWords" class="form-control">
                                    </div>
                                 
                                    <button class="btn btn-info" id="SearchWords" type="button" >搜索</button>
                                </form>
                                <!--===================================================-->
                        
		         <div class="widget-box">
		          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
		            <h5>预约时间管理</h5>
		          </div>
		                  
		          <div class="widget-content nopadding">
		            <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
		             <table class="table table-bordered data-table dataTable" id="DataTables_Table_0">
		              <thead>
		                <tr role="row">
		                	<th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 275px;">
		                		<div class="DataTables_sort_wrapper">发布时间
		                			<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
		                		</div>
		                	</th>
		                	<th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 275px;">
		                		<div class="DataTables_sort_wrapper">文章标题
		                			<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
		                		</div>
		                	</th>
		                	<th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 275px;">
		                		<div class="DataTables_sort_wrapper">操作
		                			<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span>
		                		</div>
		                	</th>
		                </tr>
		              </thead>            
		           	  <tbody role="alert" aria-live="polite" aria-relevant="all" id="tbody-appointmentlist">   	 
		           	            <!-- 
		           	            <tr class="gradeA odd">
				                	<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>						
									<td><a href="">编辑</a>&nbsp;<a href="#">删除</a></td>
		               			</tr>        
		               			-->   	           	          
		               </tbody>
		               <div class="itemBase">
				            <!-- 分页显示条数选择 -->
				           <select style="width:90px" id="select-pageSize">
						   <option value="2">2条/页</option>
						   <option value="5">5条/页</option>
						   <option value="10">10条/页</option>
						   </select>
			           </div>
		            </table>
		             <div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers" id="DataTables_Table_0_paginate">
				                   <!--  <span>每页2条 共11条  第1/4页</span>
					                <a tabindex="0" class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_first">首页</a>
					                <a tabindex="0" class="previous fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_previous">上一页</a>
					                <span>
						                <a tabindex="0" class="fg-button ui-button ui-state-default ui-state-disabled">1</a>
						                <a tabindex="0" class="fg-button ui-button ui-state-default">2</a>
						                <a tabindex="0" class="fg-button ui-button ui-state-default">3</a>
						                <a tabindex="0" class="fg-button ui-button ui-state-default">4</a>
						                <a tabindex="0" class="fg-button ui-button ui-state-default">5</a>
					                </span>
					                <a tabindex="0" class="next fg-button ui-button ui-state-default" id="DataTables_Table_0_next">下一页</a>
					                <a tabindex="0" class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default" id="DataTables_Table_0_last">尾页</a> -->
				      </div>
		           <!--  <div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix">
		                <div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers" id="DataTables_Table_0_paginate">
		                    <span>每页2条 共11条  第1/4页</span>
			                <a tabindex="0" class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_first">首页</a>
			                <a tabindex="0" class="previous fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_previous">上一页</a>
			                <span>
				                <a tabindex="0" class="fg-button ui-button ui-state-default ui-state-disabled">1</a>
				                <a tabindex="0" class="fg-button ui-button ui-state-default">2</a>
				                <a tabindex="0" class="fg-button ui-button ui-state-default">3</a>
				                <a tabindex="0" class="fg-button ui-button ui-state-default">4</a>
				                <a tabindex="0" class="fg-button ui-button ui-state-default">5</a>
			                </span>
			                <a tabindex="0" class="next fg-button ui-button ui-state-default" id="DataTables_Table_0_next">下一页</a>
			                <a tabindex="0" class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default" id="DataTables_Table_0_last">尾页</a>
		                </div>
		                </div> -->
		               </div>
		          </div>
		        </div>
                            </div>
                         </div>
                       </div>
                     </div>                    
                    </div>
                    <!--===================================================-->
                    <!--End page content-->
                </div>
                <nav id="mainnav-container">
                    <!--Brand logo & name-->
                    <!--================================-->
                    <div class="navbar-header">
                        <a href="index.html" class="navbar-brand">
                            <i class="fa fa-forumbee brand-icon"></i>
                            <div class="brand-title">
                                <span class="brand-text">医生管理</span>
                            </div>
                        </a>
                    </div>
                    <!--================================-->
                    <!--End brand logo & name-->
                    <div id="mainnav">
                        <!--Menu-->
                        <!--================================-->
                        <div id="mainnav-menu-wrap">
                            <div class="nano">
                                <div class="nano-content">
                                    <ul id="mainnav-menu" class="list-group">
                                        <!--Menu list item-->
                                        <li> <a href="doctor-home.jsp"> <i class="fa fa-home"></i> <span class="menu-title"> 您的主页 </span> </a> </li>
                                        
                                        <li>
                                            <a href="#">
                                            <i class="fa fa-file"></i>
                                            <span class="menu-title">以往文章</span>
                                            <i class="arrow"></i>
                                            </a>
                                        </li>
                                        
                                        <li>
                                            <a href="doctor-article.jsp">
                                            <i class="fa fa-edit"></i>
                                            <span class="menu-title">发表文章</span>
                                            <i class="arrow"></i>
                                            </a>
                                            <!--Submenu-->
                                        </li>
                                     
                    </div>
                </nav>
                <!--===================================================-->
                <!--END MAIN NAVIGATION-->
            </div>
            <!-- FOOTER -->
            <!--===================================================-->
            <footer id="footer">
                <!-- Visible when footer positions are fixed -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="show-fixed pull-right">
                    <ul class="footer-list list-inline">
                        <li>
                            <p class="text-sm">SEO Proggres</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-danger"></div>
                            </div>
                        </li>
                        <li>
                            <p class="text-sm">Online Tutorial</p>
                            <div class="progress progress-sm progress-light-base">
                                <div style="width: 80%" class="progress-bar progress-bar-primary"></div>
                            </div>
                        </li>
                        <li>
                            <button class="btn btn-sm btn-dark btn-active-success">Checkout</button>
                        </li>
                    </ul>
                </div>
                <!-- Visible when footer positions are static -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <div class="hide-fixed pull-right pad-rgt">Currently v2.2</div>
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
                <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                <p class="pad-lft">Copyright &copy; 2020.Company name All rights reserved.</p>
            </footer>
            <!--===================================================-->
            <!-- END FOOTER -->
            <!-- SCROLL TOP BUTTON -->
            <!--===================================================-->
            <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button>
            <!--===================================================-->
        </div>
<!--   模态框      --> 
  <div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					修改内容
				</h4>
			</div>
			<div class="form-group">
			<input type="hidden" class="form-control" id="articleId" name="articleId">
						<label for="firstname" class="col-sm-10">文章标题</label>
						<div class="col-sm-10">
						<input type="text" class="form-control" id="articleTitle" name="articleTitle">
						</div>
						<div class="col-sm-10">文章内容
						<textarea class="form-control" id="articleContent" name="articleContent"></textarea>
						</div> 
			</div>
				<form action="" id="update-form"  >
					<!-- 隐藏域 -->
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<!-- 使用普通按钮,做点击事件 -->
							<button type="button" class="btn btn-default" id="update-btn">修改</button>
						</div>
					</div>
				</form>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
			</div>
		</div>
	</div>
</div>
        
        <!--===================================================-->
        <!-- END OF CONTAINER -->
        <!--JAVASCRIPT-->
        <!--=================================================-->
        <!--jQuery [ REQUIRED ]-->
        <script src="js/jquery-2.1.1.min.js"></script>
        <!--BootstrapJS [ RECOMMENDED ]-->
        <script src="js/bootstrap.min.js"></script>
        <!--Fast Click [ OPTIONAL ]-->
        <script src="plugins/fast-click/fastclick.min.js"></script>
        <!--Jquery Nano Scroller js [ REQUIRED ]-->
        <script src="plugins/nanoscrollerjs/jquery.nanoscroller.min.js"></script>
        <!--Metismenu js [ REQUIRED ]-->
        <script src="plugins/metismenu/metismenu.min.js"></script>
        <!--Jasmine Admin [ RECOMMENDED ]-->
        <script src="js/scripts.js"></script>
        <!--Jquery Nano Scroller js [ REQUIRED ]-->
        <script src="plugins/nanoscrollerjs/jquery.nanoscroller.min.js"></script>
        <!--Metismenu js [ REQUIRED ]-->
        <script src="plugins/metismenu/metismenu.min.js"></script>
        <!--Switchery [ OPTIONAL ]-->
        <script src="plugins/switchery/switchery.min.js"></script>
        <!--Bootstrap Select [ OPTIONAL ]-->
        <script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
        <!--Fullscreen jQuery [ OPTIONAL ]-->
        <script src="plugins/screenfull/screenfull.js"></script>
        <!--Demo script [ DEMONSTRATION ]-->
        <script src="js/demo/form-layout.js"></script>
        <script src="js/jquery.min.js" type="text/javascript" ></script>
		<script src="js/jquery.promptu-menu.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(function(){
			//获得登录医生姓名
			var doctor = "${sessionScope.doctor}";
			var doctorId = "${sessionScope.doctorId}";
				if(doctor==""){
					alert("请先到登录也登录");
					window.location.href = "doctor-login.jsp";
				}else{
					$("#realName").html(doctor);
				} 
				sendAJAX(1);
		})	
			
			//删除文章
			$(document).on("click",".delete",function(){
				var articleId = $(this).data("articleid");
				$.ajax({
					async:true,
					type:"get",
					url:"${pageContext.request.contextPath}/ArticleServlet",
					data:{
						op:"articleId",
						articleId:articleId
					},
					dataType:"json",
					success:function(result){
						sendAJAX(1);
					},
					error:function(){
						alert("异步请求失败！");
					},
				})
			})
			
			//修改文章内容
			$(document).on("click",".modify",function(){
				$("#articleId").val($(this).data("articleid"));
				$("#articleTitle").val($(this).data("articletitle"));
				$("#articleContent").val($(this).data("articlecontent"));
				$("#update-btn").prop("disabled","disabled");
			})
			
			$("#articleTitle").change(function(){
				$("#update-btn").prop("disabled",false);
			})
			$("#articleContent").change(function(){
				$("#update-btn").prop("disabled",false);
			})
			//模态框里的修改
			$(document).on("click","#update-btn",function(){
				var articleId = $("#articleId").val();
				console.log(articleId)
				var articleContent = $("#articleContent").val();
				console.log(articleContent)
				var articleTitle = $("#articleTitle").val();
				console.log(articleTitle)
				$.ajax({
					async:true,
					type:"post",
					url:"${pageContext.request.contextPath}/ArticleServlet",
					data:{
						op:"updateArticleContent",
						articleId:articleId,
						articleContent:articleContent,
						articleTitle:articleTitle
						
					},
					dataType:"json",
					success:function(result){
						console.log(result);
						$("#modifyModal").removeClass("in");
		    		    $("#modifyModal").attr("aria-hidden",true); 
		    		    $("#modifyModal").css("display","none");
		    		    // 关闭生成的阴影背景
		    		    $(".modal-backdrop").remove();
		   			 sendAJAX(1);
					},
					error:function(){
		    			 alert("修改失败，联系管理人员！");
		    		},
				})
			})
			
			
			// 首页
		 $(document).on("click","#DataTables_Table_0_first",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum");	 
			 // 判断
			 if(pageNum == 1){
				 alert("已经是首页");		
			 }else{
				 // 调用发送请求方法,参数页码
				 sendAJAX(pageNum);
			 }	
		 });
		 
		 // 上一页
		 $(document).on("click","#DataTables_Table_0_previous",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum") - 1;
			 
			 if(pageNum < 1){
				 // 拦截请求
				 alert("已经是第一页");
			 }else{
				// 调用发送请求方法,参数页码
				 sendAJAX(pageNum);
			 }
	 	})
	 	
	 	 // 下一页
		 $(document).on("click","#DataTables_Table_0_next",function(){
			 // 获取当前页码
			 var pageNum = eval($("#pageInfo").data("pagenum") + 1);		 
			 // 获取最大页码
			 var pages = $("#pageInfo").data("pages");
			 
			 if(pageNum > pages){
				 // 拦截请求
				 alert("已经是最后一页");
			 }else{
				// 调用发送请求方法,参数页码
				 sendAJAX(pageNum);
			 }
	 	})
	 	
	 	 // 尾页
		 $(document).on("click","#DataTables_Table_0_last",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum");	 
			 // 获取最大页码
			 var pages = $("#pageInfo").data("pages");
		 
			 if(pageNum == pages){
				 // 拦截请求
				 alert("已经是尾页");
			 }
			 // 调用发送请求方法,参数页码
			 sendAJAX(pages);
			
	 	  })
	 	  
	 	  // 页码
		 $(document).on("click",".current",function(){
			 // 获取当前显示的页码
			 var currentPageNum = $("#pageInfo").data("pagenum");	
			 // 获取当前超链接上表示的页码
			 var pageNum = $(this).text();
			 if(currentPageNum == pageNum){
				 return;
			 }
			// 调用发送请求方法,参数页码
			 sendAJAX(pageNum);		
	 	  });
		 
		// 下拉框改变事件
		 $(document).on("change","#select-pageSize",function(){
			// 调用发送请求方法,参数页码
			 sendAJAX(1);		
	 	  });
		 
		// 搜索事件
		 $(document).on("click","#SearchWords",function(){
			// 调用发送请求方法,参数页码
			sendAJAX(1);		
		 });
				
				// 发送AJAX请求 
		    function sendAJAX(pageNum){
		    	 // 获取显示记录数
				 var pageSize = $("#select-pageSize").val();
				 // 获取输入关键字
				 var SearchWords = $("#SearchWords").val();	
		    	 $.ajax({
		    		 async:true,
		    		 type:"get",
		    		 url:"${pageContext.request.contextPath}/ArticleServlet",
		    		 data:{
		    			 op:"searchByPage",
		    			 pageNum:pageNum,
		    			 pageSize:pageSize,
		    			 SearchWords:SearchWords
		    		 },
		    		 dataType:"json",
		    		 success:function(result){
		    			// 调用渲染函数
		    			 showData(result);
		    		 },
		    		 error:function(){
		    			 alert("异步请求失败!");
		    		 }
		    	 });
		    }
			
			function showData(result){
				var content = "";
				if(result.data.length==0){
					$(".newList").html("无相关数据");
					$("#DataTables_Table_0_paginate").html("");
				}else{
						for(var i=0;i<result.data.length;i++){
							var allArticle=result.data[i];
								content += "<tr class=\"gradeA odd\">"+
								"<td>"+allArticle.articleTime+"</td>"+
								"<td>"+allArticle.articleTitle+"</td>"+
								"<td><a href=\"#\" data-toggle=\"modal\" data-target=\"#modifyModal\" id=\"doctorAO\" class=\"modify\" data-articletitle=\""+allArticle.articleTitle+"\" data-articlecontent=\""+allArticle.articleContent+"\" data-articleid=\""+allArticle.articleId+"\">修改时间</a>&nbsp;<a href=\"#\" class=\"delete\" data-articleid=\""+allArticle.articleId+"\">删除</a></td>"+
				   			    "</tr>";	
							}
					$("#tbody-appointmentlist").html(content);
				    		
					 
					 // 渲染分页信息
					 var pageInfo = "";
					 pageInfo = "<span id=\"pageInfo\" data-pagenum=\""+result.pageNum+"\"  data-pages=\""+result.pages+"\">每页"+result.pageSize+"条 共"+result.total+"条  第"+result.pageNum+"/"+result.pages+"页</span>";
					 
					 if(result.pageNum == 1){
						 pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_first\" disabled=\"disabled\">首页</a>";
						 pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_previous\" disabled=\"disabled\" >上一页</a>";
					 }else{
						 pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_first\" >首页</a>";
						 pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_previous\"  >上一页</a>";
					 }
			
					 pageInfo += "<span>";
					 
					 for(var i = 1; i <= result.pages; i++){
						 // 设置当前的页面激活样式
						 if(result.pageNum == i){
							 pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled current\"  >"+i+"</a>";
						 } else{
							 pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default current\" >"+i+"</a>";
						 }
					 }
					 
					 pageInfo += "</span>";
					 
			 		if(result.pageNum == result.pages){
			 			 pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_next\" disabled=\"disabled\">下一页</a>";
			 			 pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_last\" disabled=\"disabled\">尾页</a>";
					}else{
						 pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_next\">下一页</a>";
						 pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_last\">尾页</a>";
					}
					 
					 $("#DataTables_Table_0_paginate").html(pageInfo);
					 
		}
			}
		
		</script>
    </body>
</html>